<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Icons</title>
    <#include "/include/resource.html"/>
    <script type="application/javascript">
        function confirmToCancel(id){
            bootbox.confirm("Confirm Delete？", function (result) {
                if (result) {
                    $.ajax({
                        type: "DELETE",
                        url: "${base}/admin/icon/delete?id="+id,
                        dataType: "json",
                        success: function(data){
                            console.log(data);
                            if(typeof(data)!='undefined'){
                                document.location.reload();
                            }
                        },
                        error:function(e){
                            alert("Delete Failure");
                        }
                    });
                }
            });
        }
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "/include/header.html"/>
    <#include "/include/main-sidebar.html"/>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                
                <small> Icons</small>
            </h1>
            <ol class="breadcrumb">
                <li><i class="fa fa-dashboard"></i> </li>
                <li class="active">Icons</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title">Icons</h3>
                            <a type="button" class="btn btn-block btn-primary btn-sm add" onclick="HF.showDialog('${base}/admin/icon/operate')" href="#">Add</a>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <form id="tableForm" method="post" class="form-horizontal" action="${base}/admin/icon/list">
                                <div class="form-group">
                                    <div class="row">
                                            <div class="col-md-2">
                                                <label for="name" class="col-md-5 control-label">Name：</label>
                                                <div class="col-md-7" style="padding: 0px">
                                                    <input type="text" class="form-control" value="${(queryParam.name)!}" name="name" id="name">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <label for="catagory" class="col-md-5 control-label">Catagory：</label>
                                                <div class="col-md-7" style="padding: 0px">
                                                    <input type="text" class="form-control" value="${(queryParam.catagory)!}" name="catagory" id="catagory">
                                                </div>
                                            </div>


                                        <div class="col-md-4">
                                            <button type="button" onclick="HF.query('tableForm');" class="btn btn-primary">Query</button>
                                        </div>
                                    </div>
                                </div>
                            <table class="table table-bordered">
                                <tr>
                                    <th>No</th>
                                    <th>Name</th>
                                    <th>Catagory</th>
                                    <th>Photo</th>
                                    <th>Status</th>
                                    <th>Valid</th>
                                    <th style="width: 80px;">ActionList</th>
                                </tr>
                               <#if list??&&list?size gt 0>
                               <#list list as t>
                                <tr>
                                    <td>${t_index+1}</td>
                                <td>${(t.name)!}</td>
                                <td>${(t.catagory)!}</td>
                                    <td><a href="${base}${(t.photo)!}" target="_blank">${(t.photo)!}</a></td>
                                <td>${(t.status)!}</td>
                                    <td>${(t.valid)?string('Valid','Invalid')}</td>
                                <td style="width: 80px;">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default">..</button>
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a onclick="HF.showDialog('${base}/admin/icon/operate?id=${t.id?c}')" href="#" >edit</a></li>
                                            <li><a href="#" onclick="confirmToCancel(${t.id?c})">delete</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                    </tr>
                                    </#list>
                                    <#else>
                                        <td colspan="11" align="center">no records!</td>

                                </#if>
                            </table>
                        </div>
                        <!-- /.box-body -->
                        <@p.pager pageNo=pageNo pageSize=pageSize totalCount=totalCount />
                        </form>
                    </div>
                    <!-- /.box -->
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- 弹出窗口 -->
    <#include "/include/modal.html"/>
    <#include "/include/footer.html"/>

    <!-- /.content-wrapper -->

    <div class="control-sidebar-bg"></div>
</div>
<#include "/include/js_footer.html"/>

<script type="application/javascript">
    $(function () {

//        $('#reservation').daterangepicker();
//      //  $('#reservation').daterangepicker({autoUpdateInput:false});
//        $('.reservation').daterangepicker({
//
//            startDate:'', endDate:''})
        $.fn.datepicker.defaults.format = "yyyy-mm-dd";
        $('#datepicker').datepicker({
            autoclose: true
        })

        $('#datepicker_').datepicker({
            autoclose: true
        })

    })
</script>
</body>

</html>
